<template>
  <div class="slideBarBox">
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      unique-opened
      @close="handleClose"
      router
      :collapse="config.isCollapse"
      background-color="black"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <!-- <el-sub-menu>
        <template #title>
          <el-icon><Menu /></el-icon>
          <span>{{ config.name }}</span>
        </template> -->

      <el-menu-item :index="config.router" @click="cceshi(config.router)">
        <el-icon><HomeFilled /></el-icon>
        <template #title>首页</template>
      </el-menu-item>
      <el-sub-menu
        v-for="(item, index) in props.slideBar"
        :key="index"
        :index="String(index + 1)"
      >
        <template #title>
          <el-icon><Menu /></el-icon>
          <span>{{ item.name }}</span>
        </template>

        <el-menu-item
          v-for="(v, index) in item.children"
          :key="index"
          :index="v.router"
          @click="cceshi(v.router)"
          >{{ v.name }}</el-menu-item
        >
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, reactive, shallowRef, computed } from "vue";

const props = defineProps({
  slideBar: {
    type: Array,
    default: () => [],
  },
});
const config = reactive({
  router: "/index/home",
  name: "首页",
  isCollapse: false,
});
function cceshi(d) {
  // console.log(d);
}
function handleClose() {}
function handleOpen() {}
</script>

<style lang="scss">
.slideBarBox {
  background-color: #9e878783;
  // height: 100%;
  // border-top: transparent 1px solid;
  .bar {
    background-color: #0dd44542;
    height: 50px;
    margin-top: 1px;
    cursor: pointer;
    .item {
      padding-left: 20px;
    }
  }
}
</style>